<template>
  <div class="container">
    <h1 class="title">课程成绩</h1>

    <!-- 显示表格 -->
    <el-table v-if="progressAndScores.length" :data="progressAndScores" border style="margin-top: 20px;">
      <el-table-column prop="courseName" label="课程名称" width="450"></el-table-column>
      <el-table-column prop="score" label="成绩" width="450"></el-table-column>
      <el-table-column prop="semester" label="学期" width="450"></el-table-column>
    </el-table>

    <!-- 如果没有数据，显示暂无数据 -->
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script>
import axios from 'axios'; // 引入 axios

export default {
  name: "ProgressAndScores",
  data() {
    return {
      progressAndScores: [],  // 存储从后端获取的数据
    };
  },
  created() {
    this.fetchProgressAndScores();  // 在组件创建时调用获取数据的方法
  },
  methods: {
    // 查询学生课程学习进度和成绩
    async fetchProgressAndScores() {
      const userData = JSON.parse(localStorage.getItem("honey-user")); // 获取存储的学生信息
      if (!userData || !userData.name) {
        console.error("用户未登录或信息不完整");
        return;
      }
      try {
        // 向后端请求数据，传递学生姓名作为请求头
        const response = await axios.get("http://localhost:9000/studentScore/progressAndScores", {
          headers: {
            studentName: userData.name, // 从 localStorage 中获取学生姓名
          },
        });

        // 如果响应成功，更新课程进度和成绩
        this.progressAndScores = response.data;
      } catch (error) {
        console.error("查询失败:", error);
        this.progressAndScores = [];  // 请求失败时，清空数据
      }
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.el-table {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.el-table-column {
  text-align: center;
}

.no-data {
  text-align: center;
  color: #888;
  font-size: 16px;
  margin-top: 20px;
}

</style>
